define([], function() {
    'use strict';
    
    /**
     * 创建步骤条
     * @param id - 容器id
     * @param mode - left, right, top, bottom
     * @param source - 步骤条数据 [{ label:"", value:"" }]
     * @param defaultKey - 默认显示的步骤的key
     * @param key - 步骤条唯一的key，默认为value
     * @param showKey - 步骤条显示的key，默认为label
     * 
     * @function setStepKey - 设置当前步骤条的位置（根据key值）
     * @function setStepIndex - 设置当前步骤条的位置（根据index值）
     * @function getCurrent - 获取当前步骤的信息 { key, index, item }
     * @function setStepColor - 设置某一步的颜色值，该方法建议只是静态显示的时候使用
     * @function preStep - 显示上一步
     * @function nextStep - 显示下一步
     */
    function MyStep(option){
        if(!option){
            throw new Error('options is missing');
        }
        if(!option.id){
            throw new Error('box id is missing');
        }
        this.id = option.id;
        this.source = option.source || [];
        if(this.source.length <= 1){
            throw new Error('source length should > 1');
        }
        this.mode = option.mode || 'left';
        this.key = option.key || 'value';
        this.showKey = option.showKey || 'label';
        this.box = document.getElementById(this.id);
        this.init();
        if(!option.defaultKey){
            this.setStepIndex(0);
        }else{
            this.setStepKey(option.defaultKey);
        }
    }

    MyStep.prototype.init = function(){
        this.render();
    }

    MyStep.prototype.render = function(){
        var that = this;
        var str = '';
        if(that.mode == "left" || that.mode == "right"){
            str = '<div class="yby-steps-box left">';
            var source = that.mode == "left" ? this.source : this.source.reverse();
            source.forEach(function(item, index){
                str += '<div class="step ' + (index == 0 ? "first" : index == that.source.length - 1 ? "last" : "") + '" style="flex-basis: ' + (100 / that.source.length) + '%;" data-key="' + item[that.key] + '">'
    
                    + '<div class="circle-box">'
                    + '<div class="circle-icon-box"><span class="circle"></span></div>'
                    + '<div class="step-line"></div>'
                    + '</div>'
    
                    + '<div class="tips-box">'
                    + '<span class="title">' + item[that.showKey] + '</span>'
                    + '</div>'
    
                    + '</div>';
            })
            str += '</div>';
        }
        else if(that.mode == "bottom" || that.mode == "top"){
            str = '<div class="yby-steps-box bottom">';
            var source = that.mode == "top" ? this.source : this.source.reverse();
            source.forEach(function(item, index){
                str += '<div class="step ' + (index == 0 ? "first" : index == that.source.length - 1 ? "last" : "") + '" data-key="' + item[that.key] + '">'
    
                    + '<div class="circle-box">'
                    + '<div class="circle-icon-box"><span class="circle"></span></div>'
                    + '<div class="step-line"></div>'
                    + '</div>'
    
                    + '<div class="tips-box">'
                    + '<div class="title-box">'
                    + '<span class="title">' + item[that.showKey] + '</span>'
                    + '<span class="date">'+ (item.date || '') +'</span>'
                    + '</div>'
                    + '<div class="msg">'+ (item.msg || '') +'</div>'
                    + '</div>'
    
                    + '<span class="clear"></span>'
    
                    + '</div>';
            })
            str += '</div>';
        }
        
        this.box.innerHTML = str;
    }

    MyStep.prototype.setStepKey = function(key){
        var that = this;
        var flag = this.mode != "bottom" && this.mode != "right" ? false : true;
        $(this.box).find('.step').map(function(index, item){
            var aKey = $(item).data('key');
            $(item).removeClass('active');
            if(that.mode != "bottom" && that.mode != "right"){
                if(!flag){
                    $(item).addClass('active');
                }
                flag = aKey == key ? !flag : flag;
            }else{
                flag = aKey == key ? !flag : flag;
                if(!flag){
                    $(item).addClass('active');
                }
            }
        })
    }

    MyStep.prototype.setStepIndex = function(index){
        var len = this.source.length;
        if(index >= len || index < 0){
            throw new Error('index is out of range');
        }
        if(this.mode == "left" || this.mode == "top"){
            $(this.box).find('.step').removeClass('active').eq(index).addClass('active').prevAll().addClass('active');
        }
        else if(this.mode == "bottom" || this.mode == "right"){
            $(this.box).find('.step').removeClass('active').eq(len - 1 - index).addClass('active').nextAll().addClass('active');
        }
    }

    MyStep.prototype.getCurrent = function(key){
        var index = $(this.box).find('.step.active').length - 1;
        var key = $(this.box).find('.step.active').eq(index).data('key');
        var source = this.mode != "left" && this.mode != "top" ? this.source.reverse() : this.source;
        var item = source[index];
        return {
            index: index,
            key: key,
            item: item
        }
    }

    MyStep.prototype.preStep = function(){
        var current = this.getCurrent();
        var min = 0;
        var index = current.index > 0 ? (current.index - 1) : min;
        this.setStepIndex(index);
    }

    MyStep.prototype.nextStep = function(){
        var current = this.getCurrent();
        var max = this.source.length - 1;
        var index = current.index < max ? (current.index + 1) : max;
        this.setStepIndex(index);
    }

    /**
     * 来改变某一个节点的色值，这个方法只建议静态显示的时候用
     * @param key - 唯一值
     * @param color - 颜色值 rgb(247, 53, 53, 0.5) - 粉色；#f73535=rgb(247, 53, 53) - 红色
     */
    MyStep.prototype.setStepColor = function(key, color){
        $(this.box).find('.step').map(function(index, item){
            var aKey = $(item).data('key');
            if(aKey == key){
                $(item).find('.circle').css({
                    border: '2px solid #e9ecf0',
                    backgroundColor: color
                });
                $(item).find('.text').css('color', color);
            }
        })
    }

    return MyStep;

});